<template>
    <div class="page-header">
        <div v-if="title" class="title">{{ title }}</div>
        <slot></slot>
        <div v-if="desc" class="desc">{{ desc }}</div>
    </div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'PageHeader',
    props: {
        title: String,
        desc: String
    },
})
</script>
<style lang='less' scoped>
.page-header {
    margin: -@padding-lg;
    padding: @padding-xs @padding-lg;
    margin-bottom: @padding-lg;
    background-color: @component-background;
    .title {
        padding: @padding-xs;
        font-size: @heading-4-size;
        font-weight: 600;
        color: @heading-color;
    }
    .desc {
        padding: @padding-xs;
        color: @text-color-secondary;
    }
}
</style>